<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular  :autoplay="false" @change="changeWord">
				<swiper-item  v-for="(item,index) in words" :key="index">
					<view class="card">
						<view class="card-content">
							<view class="word word-top">
								{{item.word}}
							</view> 
							<view class="explain ">
								<text class="label">中文</text><text>{{item.explain || '--'}}</text>
							</view>
							<view class="explain ">
								<text class="label">释义</text><text>{{item.explainEn || '--'}}</text>
							</view>
							<view class="img">
								<image :src="item.imgfile.url" mode="widthFix"></image>
							</view>
							<view class="explain ">
								<text class="label">例句</text><text>{{item.example || '--'}}</text>
							</view>
							<view class="explain ">
								<text class="label">释义</text><text>{{item.exampleZh || '--'}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
const pageDataCenter=uniCloud.importObject('page-data-center')
const AUDIO = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				words:[],
				currentIndex:0,
				id:'',
				progress:'',
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了新单词，你也一起来呀'
				}
			}
		},
		onLoad(e) {
			e.id && this.getData(e.id)
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		watch:{
			progress(val){
				val && uni.setNavigationBarTitle({
						title:this.currentIndex+'/'+this.words.length
					})
			}
		},
		methods: {
			getData(id){
				this.id=id
				pageDataCenter.getChapterStudyWords(id).then((res)=>{
					console.log(res)
					this.words=res.data
					this.playVoice(this.words[0]['word'])
					uni.setNavigationBarTitle({
						title:'1/'+res.data.length
					})
				})
			},
			changeWord(e){
				console.log(e)
				let i=e.detail.current
				setTimeout(()=>{
					this.currentIndex=e.detail.current
					this.progress = `${(i/this.words.length)*100}%`
					this.words[this.currentIndex] && this.playVoice(this.words[this.currentIndex]['word'])
					i == this.words.length && this.submitProgress()
				}, 500)
			},
			submitProgress(redirectTo=1) {
				pageDataCenter.submitProgress({
					type:1,
					chapter_id:this.id,
					progress: this.progress
				},'add').then((res) => {
					console.log('submitScore',res)
					redirectTo && uni.redirectTo({
						url:'/pages/finish/finish?id='+this.id+`&count=${this.words.length}`
					})
				})
			},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		},
		onUnload() {
			this.submitProgress(0)
		},
		onShareAppMessage(res) {
				//实现根据不同页面返回不同的转发信息
				let pages = getCurrentPages();
				let routerUrl = pages[0].route //获取当前页的路径
				return {
					title: this.share.title,
					path: '/' + routerUrl, // 路径前面必须要加'/'
					imageUrl: this.share.imageUrl,
					desc: this.share.desc,
					content: this.share.content,
					success(res) {
						uni.showToast({
							title: '分享成功'
						})
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				}
			}
	}
</script>

<style scoped>
	page,.page{
		background-color: #e3ebee;
	}
	.swiper{
		height: 80vh;
	}
	.card{
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
		height: 70vh;
	}
	.explain{
		margin: 25px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.explain text{
		margin-right: 5px;
		flex: 1;
		font-size: 14px;
		color: #333;
		text-align: left;
	}
	.explain text:first-child{
		 flex: 0 0 40px;
		 display: inline-block;
		 text-align: center
	}
	.label{
		background-color: #45ff8f;
		color: #fff;
		padding: 2px 6px;
		border-radius: 5px;
	}
	.success{
		border-color: #00cb62;
		background-color: #8bcb96;
	}
	.error{
		border-color: #ee0b0b;
		background-color: #cb9394;
	}
</style>
